<template>
  <el-container>
  <el-header>
    <el-row>
  <el-col :span="24">口算练习器<div class="grid-content bg-purple-dark"></div></el-col>
</el-row>


  </el-header>
  <el-main>
    <el-row>
  <el-col :span="6">生成数量:<div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><el-input-number v-model="num" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6">年级选择:<div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6">
    <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"> <div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"> <el-button type="primary" round>导入试题</el-button><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"> <el-button type="success" round>导出试题</el-button><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"> <el-button type="success" round>试题练习</el-button><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"> <el-button type="success" round>试题批改</el-button><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"> <el-button type="success" round>试题分析</el-button><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
    <el-tabs type="border-card">
  <el-tab-pane label="立即生成"><el-button type="danger" round>立即生成</el-button></el-tab-pane>
  <el-tab-pane label="导入试题">导入试题</el-tab-pane>
  <el-tab-pane label="导出试题">导出试题</el-tab-pane>
  <el-tab-pane label="试题练习">试题练习</el-tab-pane>
  <el-tab-pane label="试题批改">试题批改</el-tab-pane>
  <el-tab-pane label="试题分析">试题分析</el-tab-pane>
</el-tabs>
  </el-main>

</el-container>
</template>


<script>
export default {
  data () {
    return {
      username: '',
      options: [{
          value: '选项1',
          label: '一年级'
        }, {
          value: '选项2',
          label: '二年级'
        }, {
          value: '选项3',
          label: '三年级'
        }, {
          value: '选项4',
          label: '四年级'
        }, {
          value: '选项5',
          label: '五年级'
        },{
          value: '选项6',
          label: '六年级'
        }],
        value: '选项1',
        num: 100
    };
  },
  created() {
    this.username = this.$route.query.name;
  },
  methods: {
      handleChange(value) {
        console.log(value);
      }
    },
}
</script>

<style scoped>
 .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    width: 80%;
    margin: 0 auto;
    height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 60px;
    height: 500px;
    width: 80%;
    margin: 0 auto;
  }
</style>